<template>
  <div class="radioStationBox">
    <div class="detailLeft">
      <Introduce :detailObj="detailObj" />
      <AudioList ref="audioDom" />
    </div>
    <div class="detailRight">
      <RightDom
        v-if="detailObj.categoryId"
        :categoryId="detailObj.categoryId"
      />
      <DownloadApp />
    </div>
  </div>
</template>

<script>
import { radioStationDetail } from "@/api";
import Introduce from "@/views/radioStationDetail/introduce.vue";
import AudioList from "@/views/radioStationDetail/audioList.vue";
import RightDom from "@/views/radioStationDetail/rightDom.vue";
import DownloadApp from "@/components/DownloadApp";
export default {
  created() {
    this.getDetail();
  },
  data() {
    return {
      detailObj: {},
    };
  },
  components: {
    Introduce,
    AudioList,
    RightDom,
    DownloadApp,
  },
  methods: {
    getDetail() {
      radioStationDetail({ rid: this.$route.query.id }).then((res) => {
        this.detailObj = res.djRadio;
        console.log(res.djRadio);
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    if (to.query.id != from.query.id) {
      this.getDetail();
    }
    this.$refs.audioDom.getmusicList();
  },
};
</script>

<style lang="scss" scoped>
.radioStationBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .detailLeft {
    flex: 1;
    padding: 47px 30px 40px 39px;
    border-right: 1px solid #d3d3d3;
    box-sizing: content-box;
    overflow: hidden;
  }
  .detailRight {
    padding: 20px 40px 40px 30px;
    width: 270px;
    box-sizing: border-box;
  }
}
</style>